<template>
  <div>
    <a-player v-if="audio.length > 0" ref="audio" :audio="audio" :lrc-type="1" fixed />
  </div>
</template>
<script>
import { listMusic } from '@/api/blog/music'

export default {
  name: 'MusicPlayer',
  components: {},
  props: {
    currentMusicId: {
      type: String,
      default: ''
    },
    /** 音乐数据 */
    audio: {
      type: Array,
      default: []
    }
  },
  watch: {
    currentMusicId(newVal) {
      if (newVal) {
        setTimeout(() => {
          const index = this.audio.findIndex(item => item.id === newVal)
          this.$refs.audio.switch(index);
        }, 150)
      }
    }
  },
  data() {
    return {
      headStyle: {
        fontSize: '18px',
        fontWeight: 'bold',
        lineHeight: '25px',
        borderLeft: '5px solid #409eff'
      },
      bodyStyle: {
        maxWidth: '400px',
        overflow: 'hidden'
      },
      /** 音乐数据 */
      // audio: []
    }
  },
  created() {
    // this.getMusicList();
  },
  methods: {
    getMusicList() {
      listMusic().then(res => {
        this.audio = res.rows
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .aplayer {
  left: unset !important;
  .aplayer-body {
    left: unset !important;
    bottom: unset !important;
    top: 100px !important;
    max-width: 358px !important;
  }
}
::v-deep .aplayer-fixed {
  left: unset !important;
  top: 170px !important;
  bottom: unset !important;
  .aplayer-list {
    margin-bottom: unset !important;
    border-bottom: 1px solid #eee !important;
  }
  .aplayer-lrc {
    bottom: 28px !important;
  }
}
</style>
